<script setup>
import {ref} from "vue";
import {LoginDTO, RegisterDTO} from "@/model/account.js";
import {r_a_checkCode, r_a_login, r_a_register, r_a_resetPassword} from "@/request/api/account.js";
import {useLoginStorage} from "@/stores/loginStorage.js";
import {ElMessageBox, ElNotification} from "element-plus";

const loginStore = useLoginStorage();
const loginForm = ref({...LoginDTO});
const registerForm = ref({...RegisterDTO});
const model = ref(true); // true登录，false注册
const visible = defineModel('visible', {default: false});

const closedDialog = () => {
  visible.value = false;
  loginForm.value = {...LoginDTO};
  registerForm.value = {...RegisterDTO};
}

const login = () => {
  r_a_login(loginForm.value).then(data => {
    loginStore.setUserInfo(data.userVO);
    loginStore.setTokenInfo(data.tokenVO);
    loginStore.setIsLogin(true);
    console.log(data.userVO, loginStore.getUserInfo);
    closedDialog();
  });
}

const register = () => {
  r_a_register(registerForm.value).then((data) => {
    loginStore.setUserInfo(data.userVO);
    loginStore.setTokenInfo(data.tokenVO);
    loginStore.setIsLogin(true);
    closedDialog();
  });
}

const checkCode = () => {
  r_a_checkCode({username: loginForm.value.username}).then(data => {
    ElNotification.success({
      title: '登 录 验 证 码',
      dangerouslyUseHTMLString: true,
      message: `验证码为：<span style="color: darkgreen">${data}<span>`,
      duration: 1000 * 5,
    });
  });
}

const resetPassword = () => {
  ElMessageBox.confirm("确定重置密码？", {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => r_a_resetPassword({username: loginForm.value.username}).then(data => {
    ElNotification.success({
      title: '重 置 密 码',
      dangerouslyUseHTMLString: true,
      message: `新密码为：<span style="color: darkgreen">${data}<span>`,
      duration: 1000 * 5,
    });
  })).catch(console.log);
}

</script>

<template>
  <el-dialog v-model="visible" width="600" @closed="closedDialog">
    <template #header>
      <div class="dia-header">登 录 或 注 册</div>
    </template>
    <!-- 登 录-->
    <el-form v-if="model" :model="loginForm" label-width="100px">
      <el-form-item label="账 号">
        <el-input v-model="loginForm.username" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密 码">
        <el-input v-model="loginForm.password" type="password" show-password
                  placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="loginForm.checkCode" type="password" show-password
                  placeholder="请输入验证码">
          <template #append>
            <el-button @click="checkCode">获取验证码</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="sure" type="success" @click="login">登 录</el-button>
      </el-form-item>
    </el-form>

    <!-- 注 册-->
    <el-form v-if="!model" :model="registerForm" label-width="100px">
      <el-form-item label="账 号">
        <el-input v-model="registerForm.username" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密 码">
        <el-input v-model="registerForm.password" type="password" show-password
                  placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="registerForm.surePassword" type="password" show-password
                  placeholder="请再次输入密码"/>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="registerForm.checkCode" type="password" show-password
                  placeholder="请输入验证码">
          <template #append>
            <el-button @click="checkCode">获取验证码</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="sure" type="primary" @click="register">注 册 并 登 录</el-button>
      </el-form-item>
    </el-form>

    <!--        <div style="float: right; border: red 1px solid;">
              欢 迎 登 录 SJ-OJ 系 统
            </div>-->

    <template #footer>
      <span v-if="model">
        <el-button type="warning" link @click="resetPassword">忘 记 密 码</el-button>
        <el-button type="primary" link @click="model = !model">没 有 账 号，去 注 册</el-button>
      </span>
      <span v-if="!model">
        <el-button type="success" link @click="model = !model">已 有 账 号，去 登 录</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped>
.dia-header {
  text-align: center;
}

.el-form {
  max-width: 400px;
  display: inline-block;
}

.sure {
  width: 100%;
  border: groove 1px;
}
</style>